<template>
	<div class="notice-contain">
		<div class="notice-box" v-for="n in notice">
				<h4 class="title">{{n.title}}</h4>
				<p class="content">{{n.content}}</p>
				<p class="time">发布时间：{{n.time}}</p>
		</div>
		
	</div>
</template>

<script>
	export default {
		data() {
			return {
				notice: [{
						title: "新闻标题新闻标题新闻标题新闻标题",
						content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111.",
						time: "发布时间：2022-05-02 09:59:53"
					},
					{
						title: "新闻标题新闻标题新闻标题新闻标题",
						content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
						time: "发布时间：2022-05-02 09:59:53"
					},
					{
						title: "新闻标题新闻标题新闻标题新闻标题",
						content: "There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.",
						time: "发布时间：2022-05-02 09:59:53"
					}
				]

			}
		}
	}
</script>

<style>
	.content{
		text-align: left;
		max-height: 132.44px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.notice-box{
		margin: 20px auto;
		background-color: white;
		width: 1100px;
		max-height: 300px;
		padding: 10px 20px;
	}
	.notice-contain{
		background: #f7f9fc;
		padding: 50px 150px;
	}
</style>
